<script setup lang="ts">
import { isObject, isString } from 'lodash-es';
import { ref, defineProps, computed, toRaw, onBeforeUnmount } from 'vue'

const props = defineProps({
  renderOpts: Object,
  params: Object
})

const render = computed(() => {
  const columnRaw = props.renderOpts.props.columnRaw
  return (columnRaw.editComponent || columnRaw.component || 'ElInput') as ComponentRender
})

const supporProps = computed(() => {
  const result = {}

  if (isObject(render.value) && render.value.key === 'SelectMaker') {
    result['popper-class'] = 'vxe-table--ignore-clear'
    result['filterable'] = true
  }

  return result
})

const getValue = () => {
  return props.params.row[props.params.column.id]
}
const setValue = (value: any) => {
  props.params.row[props.params.column.id] = value
}

const value = ref<any>(getValue())

onBeforeUnmount(() => {
  setValue(value.value)
})

</script>

<template>
  <ComponentRender v-model="value" :render="render" v-bind="supporProps" :args="[toRaw(props)]" />
</template>